<template>
  <div class="authorizationList el-row--flex">
    <el-table
      ref="table"
      :height="tableHeight"
      :data="authorizationList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="现有文件夹" sortable />
      <el-table-column label="查" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isLook"
            :active-value="1"
            :inactive-value="0"
            active-color="linear-gradient(225deg,rgba(58,123,213,1) 0%,rgba(0,210,255,1) 100%)"
            @change="
              bloon => {
                handleChange(scope.row.id, bloon, 'is_look');
              }
            "
          />
        </template>
      </el-table-column>
      <el-table-column label="删" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isDelete"
            :active-value="1"
            :inactive-value="0"
            active-color="linear-gradient(225deg,rgba(58,123,213,1) 0%,rgba(0,210,255,1) 100%)"
            @change="
              bloon => {
                handleChange(scope.row.id, bloon, 'is_delete');
              }
            "
          />
        </template>
      </el-table-column>
      <el-table-column label="改" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isUpdate"
            :active-value="1"
            :inactive-value="0"
            active-color="linear-gradient(225deg,rgba(58,123,213,1) 0%,rgba(0,210,255,1) 100%)"
            @change="
              bloon => {
                handleChange(scope.row.id, bloon, 'is_update');
              }
            "
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAuthorizationList, roleUpdateFolder } from '@/api/jurisdiction'
export default {
  name: 'AuthorizationList',
  filters: {},
  data() {
    return {
      authorizationList: [],
      roleId: null,
      tableHeight: 50
    }
  },
  computed: {},
  mounted: function() {
    this.$nextTick(function() {
      const height = document.querySelector('.app-main').offsetHeight
      this.tableHeight = height - this.$refs.table.$el.offsetTop - 50

      console.log(this.tableHeight)
      // 监听窗口大小变化
      const self = this
      window.onresize = function() {
        self.tableHeight = height - self.$refs.table.$el.offsetTop - 50
      }
    })
    // this.$refs.table.$el.offsetTop：表格距离浏览器的高度
    // 50表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
  },
  methods: {
    getAuthorization(id) {
      this.roleId = id
      getAuthorizationList(id)
        .then(result => {
          const { data } = result
          this.authorizationList = data
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleChange(folderId, bloon, type) {
      roleUpdateFolder(this.roleId, folderId, type, bloon)
        .then(result => {
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.authorizationList {
  flex: 1;

  thead {
    width: 100%;
    height: 70px;
    background: rgba(105, 194, 233, 0.2);
    border-radius: 10px;
  }
}
</style>
<style lang="scss" >
.authorizationList {
  thead {
    width: 100%;
    height: 70px;
    border-radius: 10px;
    tr,
    th {
      background: rgba(105, 194, 233, 0.2);

      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(44, 161, 213, 1);

      padding: 0;

      .cell {
        line-height: 70px;
      }
    }

    tr {
      border-radius: 10px;
     th:first-child {
        border-radius: 10px 0 0 0;
      }
      th:nth-last-child(2) {
        border-radius: 0 10px 0 0;
      }
    }
  }
}
</style>
